<!DOCTYPE html>
<html>
	<script src="webjars/demo-console/index.js"></script>
	<script src="js/kurento-utils.js"></script>
	<script src="js/kurento.js"></script>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>聊天</title>
		<link rel="stylesheet" type="text/css" href="gulp-css/reset.css" />
		<link rel="stylesheet" href="gulp-css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="gulp-css/common.css" />
	</head>

	<body>

		<!--登录-->
		<div id="div_register" class="register" none>

			<div class="register-form">
				<h2>Video Call 1 to 1 with WebRTC</h2>
				<div class="register-user_name">
					<input type="text" v-model="user_name" placeholder="请输入你的名字...">
				</div>
				<div class="register-user_name">
					<input type="text" v-model="friend_name" placeholder="请输入被叫人名字...">
				</div>
				<a href="javascript:;" class="register-button" onclick="go_to_video()">注册</a>
			</div>

		</div>

		<!--单聊视频 邀请界面-->
		<div id="div_person_video_invite" class="video-chat" none>

			<!-- 对方信息 -->
			<div class="friend_info">
				<div class="friend_avatar">
					<img src="img/qiangge.jpg" alt="">
				</div>
				<div>
					<div class="friend_name">这是名字</div>
					<div class="friend_state">等待对方接受邀请</div>
				</div>
			</div>

			<!-- 自己的影像 -->
			<div class="my-look">
				<div class="my-look-mask"></div>
			</div>

			<!-- 操作 -->
			<div class="video-opt">

				<!--邀请别人按钮-->
				<div id="person_video_invite_other" none>
					<div class="video-opt-change">
						<a href="javascript:;" class="opt_item">
							<div class="opt_icon icon-go_audio iconfont noBorder"></div>
							<div class="opt_name">切到语音通话</div>
						</a>
					</div>
					<div class="video-opt-last">
						<a href="javascript:;" class="opt_item">
							<div class="opt_icon icon-hangup iconfont"></div>
							<div class="opt_name">取消</div>
						</a>
					</div>
				</div>

				<!--被邀请 按钮-->
				<div id="person_video_invite_my">
					<div class="video-opt-last">

						<a id="person_video_refuse" href="javascript:;" class="opt_item" onclick="personVideoRefuse()">
							<div class="opt_icon icon-hangup iconfont"></div>
							<div class="opt_name">拒绝</div>
						</a>

						<div class="opt_item">
							<a id="person_video_voice" href="javascript:;" class="opt_item mb-20" onclick="personVideoVoice()">
								<div class="opt_icon icon-go_audio iconfont noBorder"></div>
								<div class="opt_name">切到语音接听</div>
							</a>
							<a id="person_video_answer" href="javascript:;" class="opt_item" onclick="personVideoAnswer()">
								<div class="opt_icon icon-answer iconfont"></div>
								<div class="opt_name">接听</div>
							</a>
						</div>

					</div>
				</div>

			</div>

		</div>

		<!--单聊视频 聊天界面-->
		<div id="div_person_video_chat" class="video-chat" none>

			<!-- 别人的影像 -->
			<div class="my-look">

				<video id="videoOutput" autoplay width="100%" height="100%" poster="img/webrtc.png"></video>
			</div>

			<!--自己的影像-->
			<div class="other-look">
				<!--<img src="img/webrtc.png">-->
				<video id="videoInput" autoplay width="100%" height="100%"></video>
			</div>

			<!-- 操作 -->
			<div class="video-opt">

				<!-- 时间 -->
				<div class="audio-time">
					00:09
				</div>

				<div class="video-opt-last">

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-go_audio iconfont"></div>
						<div class="opt_name">切到语音通话</div>
					</a>

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-hangup iconfont"></div>
						<div class="opt_name">挂断</div>
					</a>

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-change_camera iconfont"></div>
						<div class="opt_name">切换摄像头</div>
					</a>

				</div>
			</div>

		</div>

		<!--单聊语音-->
		<div class="audio-chat" >

			<div class="friend_info">
				<div class="friend_avatar">
					<img src="img/qiangge.jpg" alt="">
				</div>
				<div class="friend_name">强哥</div>
				<div class="friend_state">
					等待对方接受邀请
				</div>
			</div>

			<!-- 操作 -->
			<div class="video-opt">

				<!-- 时间 -->
				<div class="audio-time">
					00:09
				</div>

				<!--被邀请界面-->
				<div class="video-opt-last" none>

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-hangup iconfont"></div>
						<div class="opt_name">拒绝</div>
					</a>

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-answer iconfont"></div>
						<div class="opt_name">接听</div>
					</a>

				</div>

				<!--邀请别人-->
				<div class="video-opt-last" none>

					<!--<a href="javascript:;" class="opt_item border_opt">
						<div class="opt_icon icon-mute iconfont"></div>
						<div class="opt_name">静音</div>
					</a>-->

					<!-- <a href="javascript:;" class="opt_item">
                            <div class="opt_icon icon-hangup iconfont"></div>
                            <div class="opt_name">拒绝</div>
                        </a> -->

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-hangup iconfont"></div>
						<div class="opt_name">取消</div>
					</a>

					<!-- <a href="javascript:;" class="opt_item">
                            <div class="opt_icon icon-answer iconfont"></div>
                            <div class="opt_name">接听</div>
                        </a>
                         -->
					<!--<a href="javascript:;" class="opt_item border_opt">
						<div class="opt_icon icon-hand_free iconfont"></div>
						<div class="opt_name">免提</div>
					</a>-->

				</div>

				<!--接听中-->
				<div class="video-opt-last">

					<a href="javascript:;" class="opt_item border_opt">
						<div class="opt_icon icon-mute iconfont"></div>
						<div class="opt_name">静音</div>
					</a>

					<!-- <a href="javascript:;" class="opt_item">
                            <div class="opt_icon icon-hangup iconfont"></div>
                            <div class="opt_name">拒绝</div>
                        </a> -->

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-hangup iconfont"></div>
						<div class="opt_name">挂断</div>
					</a>

					<!-- <a href="javascript:;" class="opt_item">
                            <div class="opt_icon icon-answer iconfont"></div>
                            <div class="opt_name">接听</div>
                        </a>
                         -->
					<a href="javascript:;" class="opt_item border_opt">
						<div class="opt_icon icon-hand_free iconfont"></div>
						<div class="opt_name">免提</div>
					</a>

				</div>

			</div>

		</div>

		<!--群聊 邀请界面-->
		<div class="audio-chat" none>

			<!--邀请人-->
			<div class="friend_info">
				<div class="friend_avatar">
					<img src="img/qiangge.jpg" alt="">
				</div>
				<div class="friend_name">强哥</div>
				<div class="friend_state">
					邀请你进行语音听话
				</div>
			</div>

			<div class="audio-menber">
				<p class="mb-10">通话成员</p>
				<div class="flex j-center">
					<img src="img/qiangge.jpg" />
					<img src="img/qiangge.jpg" />
				</div>
			</div>

			<!-- 操作 -->
			<div class="video-opt">

				<!--被邀请界面-->
				<div class="video-opt-change">

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-hangup iconfont"></div>
					</a>

					<a href="javascript:;" class="opt_item">
						<div class="opt_icon icon-answer iconfont"></div>
					</a>

				</div>
			</div>
		</div>

		<!--群聊接听界面-->
		<div class="audio-chat audio_video" none>

			<div class="friend_info">
				<div class="friend_avatar">
					<img src="img/qiangge.jpg" alt="">
				</div>
				<div class="friend_avatar">
					<img src="img/qiangge.jpg" alt="">
				</div>
				<div class="friend_avatar">
					<img src="img/qiangge.jpg" alt="">
				</div>
			</div>

			<!-- 操作 -->
			<div class="video-opt">

				<!-- 时间 -->
				<div class="audio-time">
					00:09
				</div>

				<!--接听中-->
				<div>

					<div class="video-opt-change">

						<a href="javascript:;" class="opt_item border_opt">
							<div class="opt_icon active icon-mute iconfont solid_item"></div>
							<div class="opt_name">静音</div>
						</a>
						<a href="javascript:;" class="opt_item border_opt">
							<div class="opt_icon icon-hand_free iconfont solid_item"></div>
							<div class="opt_name">免提</div>
						</a>
						<a href="javascript:;" class="opt_item">
							<div class="opt_icon icon-camera iconfont solid_item"></div>
							<div class="opt_name">打开摄像头</div>
						</a>
					</div>

					<div class="video-opt-last">
						<a href="javascript:;" class="opt_item">
							<div class="opt_icon icon-hangup iconfont"></div>
							<div class="opt_name">挂断</div>
						</a>
					</div>

				</div>
			</div>

		</div>

		<script src="lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>